<template>
    <div class="workbench">
        <div class="md:flex">
            <el-card class="flex-1 !border-none mb-2" shadow="never" style="padding: 0 10px">
                <div class="flex">
                    <div class="flex-1" style="width: 0">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="item.id" v-for="(item, index) in workbenchData.warehouseAll" :key="index">
                                {{ item.title }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="" style="width: 110px; margin-top: 3.5px">
                        <el-button type="primary" size="small" @click="onshousuo">确认</el-button>
                        <el-button size="small" @click="onchonzhi">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <div class="md:flex-col" style="flex: 7">
                <el-card class="!border-none md:mr-2 mb-2" shadow="never" style="flex: 3">
                    <template #header>
                        <span class="title">部分材料分布 </span>
                    </template>
                    <div style="min-height: 30px">
                        <div style="height: 310px; width: 100%; position: relative">
                            <div style="height: 100%; width: 100%; position: absolute">
                                <echartsings v-if="showecharts" :height="310" @handleClick="handleClick"
                                    :option="workbenchData.option" />
                            </div>
                            <div class="" style="
                  width: 80%;
                  height: 16px;
                  position: absolute;
                  top: 30px;
                  z-index: 9;
                  display: flex;
                  flex-direction: row;
                  left: 90px;
                ">
                                <div class="flex-1 colorbg" style="text-align: right; opacity: 1; padding-right: 3%">
                                    <el-button type="primary" size="small" @click="ondaku('工字钢')">详情</el-button>
                                    <!-- <span @click="ondaku('工字钢')" style="cursor: pointer;">详情</span> -->
                                </div>
                                <div class="flex-1 colorbg" style="text-align: right; opacity: 1; padding-right: 3%">
                                    <el-button type="primary" size="small" @click="ondaku('电缆线')">详情</el-button>
                                    <!-- <span @click="ondaku('电缆线')" style="cursor: pointer;">详情</span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="!border-none md:mr-2 mb-2" shadow="never" style="flex: 3">
                    <template #header>
                        <span class="title">盘扣件分布</span>
                    </template>
                    <el-scrollbar height="450px">
                        <p>{{ item }}</p>
                        <div class="flex" style="
                padding: 10px;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
              ">
                            <div v-if="showpie" :class="workbenchData.pkjDistribution.length == 1
                                    ? 'baring'
                                    : 'barings'
                                " v-for="(item, index) in workbenchData.pkjDistribution" :key="index">
                                <div style="position: relative; width: 100%; height: 100%">
                                    <echartsing :height="200" :option="item" />
                                    <div style="
                      position: absolute;
                      width: 100%;
                      height: 16px;
                      top: 20px;
                      left: 0;
                      display: flex;
                    ">
                                        <div class="" style="
                        width: 60%;
                        height: 100%;
                        text-align: left;
                        padding-left: 5px;
                      ">
                                            <span>
                                                库存：
                                                <span style="font-size: 16px; font-weight: 600">{{ item.count }}
                                                </span>
                                                {{ item.unit_name }}
                                            </span>
                                        </div>
                                        <div class="colorbg" style="
                        width: 20%;
                        height: 100%;
                        cursor: pointer;
                        color: rgb(0, 85, 255);
                        text-align: right;
                        padding-right: 5%;
                        position: absolute;
                        right: 3%;
                      " @click="onpieing(item)">
                                            详情
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-card>
                <!-- 修改工作台单据分布不能被筛选-->
                <DocumentDistribution ref="documentDistribution"></DocumentDistribution>
            </div>
            <div class="md:flex-col" style="flex: 1">
                <el-card class="!border-none mb-2" shadow="never" style="flex: 1">
                    <template #header>
                        <div class="md:flex">
                            <span class="title">最新单据</span>
                            <div class="flex-1" style="text-align: right">
                                <!-- <el-icon :size="13" color="#666">
									<Expand />
								</el-icon> -->
                            </div>
                        </div>
                    </template>
                    <div style="min-height: 30px; padding: 5px">
                        <el-table :data="workbenchData.tableData" :height="299" style="width: 100%" @row-click="onRowClick2"
                            :cell-style="cellStyle">
                            <el-table-column type="index" width="30" label="#" align="center" />
                            <el-table-column prop="order_no" label="单据类型" show-overflow-tooltip width="72">
                                <template #default="{ row }">
                                    <div>
                                        <el-button v-if="row.type == 30" size="small" color="#ECB361" plain>{{ row.type_name
                                        }}
                                        </el-button>
                                        <el-button v-if="row.type == 20" size="small" color="#38ddcd" plain>{{ row.type_name
                                        }}
                                        </el-button>
                                        <el-button v-if="row.type == 10" size="small" color="#ae75ef" plain>{{ row.type_name
                                        }}
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="confirm_time" label="时间" show-overflow-tooltip width="81">
                                <template #default="{ row }">
                                    <el-tooltip class="box-item" effect="dark" :content="row.confirm_time" placement="top">
                                        {{ byteLength(row.confirm_time, 10) }}
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column prop="warehouse_name" label="入库仓库" show-overflow-tooltip width="77">
                                <template #default="{ row }">
                                    <div style="width: 65px; overflow: hidden">
                                        {{ row.warehouse_name }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="outbound_warehouse_name" label="出库仓库" show-overflow-tooltip width="77">
                                <template #default="{ row }">
                                    <div style="width: 65px; overflow: hidden">
                                        {{ row.outbound_warehouse_name }}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <el-card class="flex-1 !border-none mb-4" shadow="never" tyle="flex: 1;">
                    <template #header>
                        <div class="md:flex">
                            <span class="title">大型设备</span>
                            <div class="flex-1" style="text-align: right"></div>
                        </div>
                    </template>
                    <div>
                        <div class="flex m-2" style="margin-bottom: 20px">
                            <div class="flex-1 flex" style="justify-content: center; align-items: center"
                                v-for="(item, index) in workbenchData.equipmentStatistics" :key="index"
                                @click="ontab(index)">
                                <div class="flex" :class="showtab == index ? 'borb' : 'borbs'" style="
                    border-radius: 5px 5px 0 0;
                    flex-direction: column;
                    width: 75px;
                    height: 100px;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
                  ">
                                    <p class="" style="margin-bottom: 20px; font-size: 20px">
                                        {{ item.count }}
                                        <span style="font-size: 12px">台</span>
                                    </p>
                                    <p style="font-size: 14px">{{ item.title }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="m-2 mains" style="box-sizing: border-box">
                            <el-table :data="workbenchData.equipmentStatistics[showtab]?.list" :height="313"
                                style="width: 100%" @row-click="onRowClick" :cell-style="cellStyle">
                                <el-table-column type="index" width="30" label="#" align="center" />
                                <el-table-column prop="title" label="名称" show-overflow-tooltip width="60">
                                    <template #default="{ row }">
                                        <div style="width: 52px; overflow: hidden">
                                            {{ row.title }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="model" label="型号" show-overflow-tooltip width="50">
                                    <template #default="{ row }">
                                        <div v-if="row.model.length <= 5">{{ row.model }}</div>
                                        <el-tooltip v-else class="box-item" effect="dark" :content="row.model"
                                            placement="top">
                                            {{ byteLength(row.model) }}
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="date_production" label="出厂日期" width="79">
                                    <template #default="{ row }">
                                        <div style="width: 79px; overflow: hidden">
                                            {{ row.date_production }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="warehouse_name" label="所在地" show-overflow-tooltip width="55">
                                    <template #default="{ row }">
                                        <div style="width: 52px; overflow: hidden">
                                            {{ row.warehouse_name }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="设备配件" align="center" width="60">
                                    <template #default="{ row }">
                                        <el-button link type="primary" size="small" @click="onRowClicks(row)">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    <edit-popups v-if="showEdits" ref="editRefs" @success="getLists" @close="showEdits = false" />
    <edit-popupsdel v-if="showEditsdel" ref="editRefs" @success="getLists" @close="showEditsdel = false" />
    <see-popup v-if="showsee" ref="showseeRef" @success="getLists" @close="showsee = false" />
</template>

<script lang="ts" setup>
import feedback from "@/utils/feedback";
import {
    warehouseAll,
    orderList,
    equipmentStatistics,
    pkjDistribution,
    xhclStatistics,
} from "@/api/workbench/list";
import seePopup from "../inventory/list/water.vue";
import EditPopup from "@/components/accessoriess.vue";
import EditPopups from "../inventory/bill/edit.vue";
import EditPopupsdel from "../delete/document/edit.vue";
import useAppStore from "@/stores/modules/inventory";
import echartsing from "@/components/echartsing.vue";
import echartsings from "@/components/echartsings.vue";
//单据分布 ——高扬添加
import DocumentDistribution from "./document-distribution.vue";
const showseeRef = shallowRef<InstanceType<typeof seePopup>>();
const showsee = ref(false);
const userStore = useAppStore();
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const editRefs = shallowRef<InstanceType<typeof EditPopup>>();
const showEdit = ref(false);
const showEdits = ref(false);
const showEditsdel = ref(false);
const documentDistribution = ref();
const getLists = () => { };
const checkList = ref([]);
const router = useRouter();
const byteLength = (val: any, len = 4) => {
    let b = len; // 规定长度
    let init = 0;
    let newVal = "";
    // 获取字符串字节总长度
    let totalLen = 0;
    for (var l = 0; l < val.length; l++) {
        if (val.charCodeAt(l) > 255) {
            totalLen += 2;
        } else {
            totalLen++;
        }
    }
    for (var i = 0; i < val.length; i++) {
        if (init <= b) {
            newVal += val[i];
            if (val.charCodeAt(i) > 255) {
                init += 2;
            } else {
                init++;
            }
        }
    }
    return newVal + (totalLen > b ? "" : "");
};
const onpath = (id: any, ku: any, type: any) => {
    var a = [];
    for (let i in ku) {
        a.push(ku[i]);
    }
    router.push(
        "inventory?id=" + id + "&ku=" + JSON.stringify(a) + "&type=" + 15
    );
};
const onpaths = (id: any, ku: any, type: any) => {
    var a = [];
    for (let i in ku) {
        a.push(ku[i]);
    }
    router.push("inventory?id=" + id + "&ku=" + JSON.stringify(a) + `${type ? `&type=+${type}` : ''}`);
};
const showtab = ref(0);
const ontab = (i: any) => {
    showtab.value = i;
};
const cellStyle = (row: any) => {
    return { cursor: "pointer" };
};
const handleClick = (id: any, name: any) => {

    onpath(id, [name], 15);
};

const onshousuo = () => {
    if (checkList.value.length == 0) {
        feedback.msgError(`请选择仓库`);
    } else {
        getOptions();
    }
};

const onpieing = (val: any) => {
    onpaths("盘扣件", val.warehouse_id);
};
const onchonzhi = () => {
    checkList.value = [];
    for (let i in workbenchData.warehouseAll) {
        checkList.value.push(workbenchData.warehouseAll[i].id);
    }

    getOptions();
};
const onRowClick = async (row: any, column: any) => {
    if (column.label == "设备配件") {
    } else {
        // onpath(row.no)
        showsee.value = true;
        await nextTick();
        showseeRef.value?.open("edit");
        //默认创单人
        showseeRef.value?.setFormData({ ...row, user_id: "" });
    }
};
const onRowClick2 = async (row: any) => {
    if (row.type == 30) {
        showEditsdel.value = true;
    } else {
        showEdits.value = true;
    }
    userStore.ontypeing(row.type_name);
    await nextTick();
    editRefs.value?.open("edit");
    editRefs.value?.setFormData(row);
};
const onRowClicks = async (row: any) => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open("add");
    editRef.value?.setFormData(row);
};
const ondaku = (val: any) => {
    onpaths(val, checkList.value, 15);
};

// 表单数据
const workbenchData: any = reactive({
    visitorOption: [],
    warehouseAll: [],
    equipmentStatistics: [],
    pkjDistribution: [],
    xhclStatistics: [],
    option: [],
});
const onwarehouseAll = () => {
    warehouseAll().then((data: any) => {
        workbenchData.warehouseAll = data;
        for (let i = 0; i < data.length; i++) {
            checkList.value.push(data[i].id);
        }

        getOptions();
    });
};
const showecharts = ref(false);
const showpie = ref(false);

const getOptions = () => {
    orderList({
        warehouse_id: checkList.value,
    }).then((data: any) => {
      
        workbenchData.tableData = data;
    });
    equipmentStatistics({
        warehouse_id: checkList.value,
    }).then((data: any) => {
        workbenchData.equipmentStatistics = data;
    });
    pkjDistribution({
        warehouse_id: checkList.value,
    }).then((data: any) => {
        // console.log('仓库（盘扣件）统计', data)
        workbenchData.pkjDistribution = data;
        showpie.value = false;
        setTimeout(() => {
            showpie.value = true;
        }, 300);
    });
    xhclStatistics({
        warehouse_id: checkList.value,
    }).then((data: any) => {

        workbenchData.xhclStatistics = data.total.data;
        let abc = data;
        for (let i = 0; i < data.y.length; i++) {
            abc.y[i].type = "bar";
            abc.y[i].barGap = 0;
            // abc.y[i].barWidth = 40
            abc.y[i].itemStyle = {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        formatter: (params: any) => {
                            return params.data + "米";
                        },
                        textStyle: {
                            //数值样式
                            color: "black",
                            fontSize: 12,
                        },
                    },
                },
            };
            abc.y[i].emphasis = {
                focus: "series",
            };
        }
        workbenchData.option = abc;
        if (workbenchData.option) {
            showecharts.value = false;
            setTimeout(() => {
                showecharts.value = true;
            }, 300);
        }
    });
    documentDistribution.value.setData(checkList.value);
};

onMounted(() => {
    onwarehouseAll();
});
</script>

<style lang="scss" scoped>
$color: #93d2f3;

// .colorbg {
// 	color: var(--el-color-primary);
// }
.workbench {
    min-width: 1200px;
}

.title {
    font-size: 16px;
    width: 90px;
}

:deep(.el-table .el-table__cell) {
    padding: 1px 0 !important;
}

.baring {
    width: 100%;
}

.barings {
    width: 30%;
    background-color: $color;
    border-radius: 5px;
    // overflow: hidden;
    margin-right: 4.8%;
    margin-bottom: 40px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.barings:nth-child(3n) {
    margin-right: 0;
}

.borb {
    // border: 1px solid var(--el-color-primary);
    background-color: $color;
    color: #fff;
}

.borbs {
    // border: 1px solid #ececec;
    background-color: #ececec;
}

.mains {
    border: 1px solid$color;
    background-color: $color;
}

:deep(.el-card__header) {
    padding: 5px;
}
</style>
